<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>订单列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/admin/src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .layui-input-inline{margin-top: 5px;}
    .layui-form-label{margin-top: 5px;}
    .layui-btn{margin-top: 5px;}
    .dropdown-menu-nav .layui-btn{width: 100%;}
    .dropdown-menu-nav li{padding: 2px 4px;}
  </style>
</head>
<body>
<div class="layui-form  layuiadmin-card-header-auto">
  <div class="layui-form-item" style="margin-bottom: 0px;">
    <div class="layui-inline">
      <label class="layui-form-label">订单id</label>
      <div class="layui-input-inline">
        <input type="text" name="id" id="id" placeholder="请输入用户id" autocomplete="off" class="layui-input">
      </div>
      <label class="layui-form-label">用户id</label>
      <div class="layui-input-inline">
        <input type="text" name="uid" id="uid" placeholder="请输入用户id" autocomplete="off" class="layui-input">
      </div>
      <label class="layui-form-label">所属站点</label>
      <div class="layui-input-inline">
        <select name="station_id" id="station_id"  lay-search="">
          <option value="" >选择站点</option>
          {volist name='getList' id='item'}
          <option value="{$item['id']}" >{$item['title']}</option>
          {/volist}
        </select>
      </div>

      <!--<label class="layui-form-label">用户类型</label>-->
      <!--<div class="layui-input-inline">-->
        <!--<select name="is_status" id="is_status"  >-->
          <!--<option value="" >选择状态</option>-->
          <!--<option value=1 >开启</option>-->
          <!--<option value=0 >关闭</option>-->
        <!--</select>-->
      <!--</div>-->
      <button class="layui-btn"  id="searchCompany" data-type="reload">
        <i class="layui-icon layui-icon-search layuiadmin-button-btn">搜索</i>
      </button>
    </div>
  </div>
</div>
<div class="layui-card-body" style="padding: 15px;">
<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<script src="/admin/src/layui.js" ></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>
layui.use(['form','table','dropdown'], function(){
  var table = layui.table;
  var $ = layui.$;
  var form = layui.form ;
  var dropdown = layui.dropdown ;
  table.render({
    elem: '#test'
    ,url:'/admin/order/list'/*,tpa=http://www.ilayuis.com/test/table/demo1.json*/
	,method:'post'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	,defaultToolbar: []
    ,title: '订单列表'
    ,cols: [[
		{field:'id', width:90, title: '订单id', sort: true}
		,{field:'order_sn', title: '订单编号'}
		// ,{field:'pile_gun_number', width:200, title: '充电桩编号'}
		,{field:'charge_time', width:120, title: '充电时间/分钟'}
		,{field:'charge_number', width:120, title: '充电度数'}
		,{field:'total_price', width:150, title: '金额'}
        ,{field:'all_charge_cost', width:120, title: '充电金额'}
        ,{field:'all_service_cost', width:120, title: '服务费金额'}
		,{field:'status_name', title:'订单状态', width:160}
        ,{field:'start_time', title:'开始充电时间', width:160}
		,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
    ]]
    ,page: true
  });
  var active = {
      reload: function () {
          var id = $("#id").val();//搜索框内容
          var nicknam = $("#nickname").val();//搜索框内容
          var account = $("#account").val();//搜索框内容
          //执行重载
          table.reload('test', {
              page: {
                  curr: 1 //重新从第 1 页开始
              }
              , where: {
                  id: id,//作为参数传递给后端php
                  nicknam: nicknam,//作为参数传递给后端php
                  account: account,//作为参数传递给后端php
              }
          });
      },
  };
  $('#searchCompany').on('click', function () {
      var type = $(this).data('type');//自定义type属性，这里即为reload
      active[type] ? active[type].call(this) : ''; //如果存在active[type]，则调用改函数
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var that = this;
    var data = obj.data;
    if(obj.event === 'more'){
        //更多下拉菜单
        dropdown.render({
            elem: that
            ,show: true //外部事件触发即显示
            ,data: [
                {
                    title: '详情'
                    ,id: 'details'
                },
            ]
            ,click: function(moreInfo, othis){
                if(moreInfo.id == 'details'){
                    layer.open({
                        type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                        , title: '订单详情' //不显示标题栏
                        , area : [ '75%', '90%' ]
                        , closeBtn: 1
                        , shade: 0.8//遮幕
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        // ,btn: [ '表格','取消']
                        , btnAlign: 'c'//按钮排列：居中对齐
                        , moveType: 1 //拖拽模式，0或者1
                        , resize: true
                        , content: '/admin/order/details/page?id='+data.id//跳转到想要的界面，这里是我自己项目的跳转界面
                        ,success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '${path}'
                                , target: '_blank'
                            });
                        }
                    })
                }

            }
            ,align: 'right' //右对齐弹出（v2.6.8 新增）
            ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
        });
    }
  });

});
</script>

</body>
</html>